<template>
	<div class="">
		<div class="mb10">
			<el-date-picker class="input-width" v-model="params.recordDate" type="month" value-format="yyyy-MM-dd"
				format="yyyy-MM" size="small" @change="getInstallationWarning" placeholder="选择月份">
			</el-date-picker>
		</div>
		<div style="display:flex;justify-content: space-between;">
			<div style="width: 50%;">
				<el-table :data="tableData" style="width: 100%" v-loading="loading">
					<el-table-column prop="createDateStr" label="日期"></el-table-column>
					<el-table-column prop="createTimeStr" label="时间"></el-table-column>
					<el-table-column prop="parameterName" label="参数名称" width="180"></el-table-column>
					<el-table-column prop="amount" label="参数值">
						<div slot-scope="scope">
							{{scope.row.amount}}{{scope.row.unitCode}}
						</div>
					</el-table-column>
				</el-table>
			</div>
			<div style="width: 50%;" class="ml10">
				<div style="width: calc(50% - 10px);display: inline-block;" class="textCenter bgfff pad20">
					<div>{{params.recordDate.split('-')[1]}}月异常时段</div>
					<div class="font18">{{monthCount}}次</div>
					
					<div id="pieChart1" style="width: 100%;height: 300px;"></div>
				</div>
				
				<div style="width:  calc(50% - 10px);display: inline-block;" class="textCenter bgfff pad20 ml10">
					<div>{{params.recordDate.split('-')[0]}}年异常时段</div>
					<div class="font18">{{yearCount}}次</div>
					
					<div id="pieChart2" style="width: 100%;height: 300px;"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	let that
	export default {
		name: 'installationWarning',
		props: ['installationId'],
		data() {
			return {
				params: {
					recordDate: moment().format('YYYY-MM-DD'),
					installationId: this.installationId,
				},
				tableData: [],
				data2: {},
				yearCount: 0,
				monthCount: 0,
				total: 0,
				loading: false,
				colorList1: ['#6204F1', '#D91749', '#FFDD00', '#DDDDE4'],
			}
		},
		watch: {
			installationId: {
				handler: function(val, oldVal) {
					if (val) {
						this.params.installationId = val
						this.getInstallationWarning()
					}
				},
				deep: true
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			this.getInstallationWarning()
		},

		methods: {
			getInstallationWarning() {
				that.loading = true
				that.ajax({
					url: '/installation/parameter/warning/getInstallationWarningList',
					dataType: 'json',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						that.tableData = result.data
						that.loading = false
					}
				})

				that.ajax({
					url: '/installation/parameter/warning/countInstallationWarning',
					dataType: 'json',
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					success: function(result) {
						that.data2 = result.data
						if (that.data2.month) {
							for (let item of that.data2.month){
								item.name = item.parameterName
								item.value = item.num
								that.monthCount += item.num
							} 
						}
						that.formPieChart("pieChart1", that.data2.month, true, that.colorList1)
						if (that.data2.year) {
							for (let item of that.data2.year){
								item.name = item.parameterName
								item.value = item.num
								that.yearCount += item.num
							} 
						}
						that.formPieChart("pieChart2", that.data2.year, true, that
							.colorList1)
					}
				})
			},
			
			
			formPieChart(chartId, seriesData, isBig, colorList) {
				//console.log(seriesData)
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;
			
				option = {
					grid: {
						right: "5%",
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
					},
					color: colorList,
					series: [{
						//name: '去向',
						type: 'pie',
						radius: isBig ? [30, 80] : [30, 50],
						center: ['50%', '50%'],
						roseType: 'radius',
						data: seriesData,
						label: {
							normal: {
								show: false
							},
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
			
				option && myChart.setOption(option);
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>